<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>功能服务分类管理</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div data-th-replace="~{layout :: header}"></div>
		<div class="layui-body" style="left: 10px;top:10px">
			<!-- 内容主体区域 -->
			<div>
				<form id="searchFrom" class="layui-form layui-form-pane" th:action="@{/functional/classify_list}" method="post">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">服务分类名称</label>
							<div class="layui-input-inline">
								<input name="name" placeholder="服务分类名称" class="layui-input" th:value="${name != null ? name : ''}" maxlength="30">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">操作人</label>
							<div class="layui-input-inline">
								<input name="operator" placeholder="操作人" class="layui-input" th:value="${operator != null ? operator : ''}" maxlength="30">
							</div>
						</div>
						<button type="submit" class="layui-btn">搜索</button>
						<a class="layui-btn" href="javascript:void(0)" onclick="addTag()">新增</a>
					</div>
				</form>
			</div>
			<table class="layui-table">
				<colgroup>
					<col width="100">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th><b>顺序号</b></th>
						<th><b>分类名称</b></th>
						<th><b>排序</b></th>
						<th><b>操作人</b></th>
						<th><b>操作时间</b></th>
						<th><b>操作</b></th>
					</tr>
				</thead>
				<tbody>
					<tr data-th-each="item, iterStat : ${datas}">
						<td data-th-text="${iterStat.count}+${pageIndex-1}*${pageSize}"></td>
						<td data-th-text="${item.name}"></td>
						<td><span th:onclick="'javascript:updateSort(' + ${item.id} + ',this);'" >[[${item.sort}]]</span></td>
						<td data-th-text="${item.operator}"></td>
<!-- 						<td data-th-text="${#calendars.format(item.updateTime * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td> -->
						<td data-th-text="${item.updateTime}" class="date"></td>
						<td>
							<a th:if="${item.delStatus == 0}" class="layui-btn layui-btn-xs" th:onclick="'javascript:edit(' + ${item.id} + ',this);'" >编辑</a>
							<a th:if="${item.delStatus == 0}" class="layui-btn layui-btn-xs layui-btn-warm" th:onclick="'javascript:del(' + ${item.id} + ');'">删除</a>
						</td>
					</tr>
				</tbody>
			</table>

			<div id="pageContent"></div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->

		</div>
	</div>
	<!-- <script src="/layui/jquery.min.js"></script>
<script src="/layui/layui.js"></script> -->
<script th:inline="javascript">
//JavaScript代码区域
var contextRoot = /*[[@{/}]]*/ '';
layui.use('laypage', function(){
  var laypage = layui.laypage;
  //执行一个laypage实例
  laypage.render({
	  elem: 'pageContent'
	  ,count:[[${total}]] //数据总数，从服务端得到
	  ,curr: [[${pageIndex}]]	
	  ,layout:['count','prev', 'page', 'next','skip']
	  ,jump: function(obj, first){
		  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		    console.log(obj.limit); //得到每页显示的条数
	    //首次不执行
	   if(!first || [[${pageIndex}]] != obj.curr){
	      window.location.href = contextRoot+'/functional/classify_list?pageIndex=' + obj.curr + "&pageSize=" + obj.limit +
	      "&" + $("#searchFrom").serialize();
	    } 
	  }
	}); 
});
function updateSort(id,viewObj){
	var name = $($(viewObj).parent().parent().find("td")[1]).text();
	var shot = $($(viewObj).parent().parent().find("td")[2]).text();
	$("#addForm input[name='name']").val(name);
	$("#addForm input[name='sort']").val(shot);
	$("#nameDiv").css({"display":"none"});
	layer.open({
		type: 1,
		title: "修改服务分类排序",
		area: ['700px'],
		content: $('#addDiv'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index){
			saveEdit(index,id,"你确定要修改排序吗？");
		},
		cancel:function(){}
	});
}
/**
 * 编辑标签
 */
function edit(id,viewObj){
	var name = $($(viewObj).parent().parent().find("td")[1]).text();
	var shot = $($(viewObj).parent().parent().find("td")[2]).text();
	$("#addForm input[name='name']").val(name);
	$("#addForm input[name='sort']").val(shot);
	layer.open({
		type: 1,
		title: "编辑服务分类",
		area: ['700px'],
		content: $('#addDiv'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index){
			saveEdit(index,id,null);
		},
		cancel:function(){}
	});
}
function saveEdit(index,id,msg){
	var name = $("#addForm input[name='name']").val();
	var sort = $("#addForm input[name='sort']").val();
	if(name == null || name.length <= 0){
		layer.msg('还有信息未填写，请完善信息');
		return;
	}
	if(isNaN(sort)){
		layer.msg('还有信息未填写，请完善信息');
		return;
	}
	$.ajax({
		type : "POST",
		data : {'name':name,'sort':sort,"id":id},
		url : contextRoot+"/functional/edit",
		dataType : "json",
		success : function(msg) {
			console.log(msg);
			if (msg.meta.code == 0) {
				layer.msg("编辑成功!");
				layer.close(index);
				window.location.reload();
			} else {
				layer.msg(msg.meta.message);
			}
		}
	});
}
function del(id){
	layer.confirm("你确定要删除该服分类吗？",function(index) {
		$.ajax({
			type : "POST",
			data : {'id':id},
			url : contextRoot+"/functional/del",
			dataType : "json",
			success : function(msg) {
				console.log(msg);
				if (msg.meta.code == 0) {
					layer.msg("删除成功!");
					window.location.reload();
				} else {
					layer.msg(msg.meta.message);
				}
			}
		});
	});
}
/**
 * 添加推荐问题
 */
function addTag(){
	$('#addForm')[0].reset();
	layer.open({
		type: 1,
		title: "添加服务分类",
		area: ['700px'],
		content: $('#addDiv'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index){
			save(index);
		},
		cancel:function(){}
	});
}
/**
 * 保存标签
 */
function save(index){
	var name = $("#addForm input[name='name']").val();
	var sort = $("#addForm input[name='sort']").val();
	if(name == null || name.length <= 0){
		layer.msg('还有信息未填写，请完善信息');
		return;
	}
	if(isNaN(sort)){
		layer.msg('还有信息未填写，请完善信息');
		return;
	}
	$.ajax({
		type : "POST",
		data : {'name':name,'sort':sort},
		url : contextRoot+"/functional/add",
		dataType : "json",
		success : function(msg) {
			console.log(msg);
			if (msg.meta.code == 0) {
				layer.msg("添加成功!");
				layer.close(index);
				window.location.reload();
			} else {
				layer.msg(msg.meta.message);
			}
		}
	});
}
$(document).ready(function(){
	$(".date").each(function(i){
		var val = $(this).text();
		if(val != null)
		$(this).text(formatDateTime(parseInt(val) * 1000));
	});
});
function formatDateTime(inputTime) {    
    var date = new Date(inputTime);  
    var y = date.getFullYear();    
    var m = date.getMonth() + 1;    
    m = m < 10 ? ('0' + m) : m;    
    var d = date.getDate();    
    d = d < 10 ? ('0' + d) : d;    
    var h = date.getHours();  
    h = h < 10 ? ('0' + h) : h;  
    var minute = date.getMinutes();  
    var second = date.getSeconds();  
    minute = minute < 10 ? ('0' + minute) : minute;    
    second = second < 10 ? ('0' + second) : second;   
    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;    
};  
</script>
	<div id="addDiv" style="display: none;" align="center">
		<div style="margin-top:50px;">
			<form id="addForm" class="layui-form layui-form-pane">
				<div class="layui-form-item" id="nameDiv">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>名称</label>
						<div class="layui-input-inline">
							<input name="name" placeholder="最多6个汉字，不支持其他符号" class="layui-input" maxlength="6">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>排序</label>
						<div class="layui-input-inline">
							<input name="sort" placeholder="排序" class="layui-input" value=""
								maxlength="4">
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>